<template>
    <div class="register">
        <h2 class="title">Last Order</h2>
        <img class="logo" src="@/images/register.png" alt="">
        <div class="cell-group">
            <span>昵称</span>
            <input placeholder="请输入昵称" type="text" v-model="nickName">
        </div>
        <div class="cell-group">
            <span>用户名</span>
            <input placeholder="请输入用户名" type="text" v-model="userName">
        </div>
        <div class="cell-group">
            <span>密码</span>
            <input placeholder="请输入密码" type="password" v-model="password">
        </div>
        <div class="sub">
            <router-link to="/login" tag="p">已经注册过了，直接登录</router-link>
            <van-button round type="default" size="small" @click="tap()">注册</van-button>
            
        </div>
        
    </div>
</template>

<script>
import * as api from '../api/userInfo'
export default {
    name:'Register',
    data(){
        return{
            nickName:'',
            userName:'',
            password:'',
        }
    },
    methods:{
        tap(){
            let params = {
                nickName:this.nickName,
                userName:this.userName,
                password:this.password,
            }
            if(this.nickName==''||this.nickName==''||this.password==''){
                this.$dialog.alert({
                  title: '注册失败',
                  message:'用户名和密码以及昵称不能为空'
                }).then(() => {

                });
            }else{
                api.register(params).then(data=>{
                    if(data.data.code=='success'){
                        this.$dialog.alert({
                          message: '注册成功'
                        }).then(() => {
                            this.$router.push('./login')
                        });
                    }else{
                        this.$dialog.alert({
                            title:'注册失败',
                            message: '该账号已经被注册了'
                        }).then(() => {
                          this.nickName = '',
                          this.userName = '',
                          this.password = ''
                        });
                    }
                })
            }
        }

    }
}
</script>

<style scoped>
.logo{
    margin:20px auto;
}
.register{
    height:100vh;
    background:url(../images/bg_1.png);
    background-size: 100%;
    overflow: hidden;
    padding:0 40px;
    text-align: center;
}
.title{
    font-size:24px;
    font-weight: 500;
    color:#fff;
    font-family: "微软雅黑";
    text-align:center;
    margin-top:20px;
}
.cell-group{
    margin-bottom:20px;
    display: flex;
}
.cell-group:nth-of-type(3){
    margin:0;
}
.cell-group span{
    width:80px;
    display: block;
    color:#fff;
    font-size:16px;
    text-align: left;
}
input{
    flex:1;
    background:none;
    border:0;
    color:#fff;
    font-size:14px;
    line-height:28px;
    padding-left:10px;
    border-bottom:1px solid #fff;
}
input::-webkit-input-placeholder{
    color:#eee;
}
.sub{
    text-align: center;
}
.sub .van-button{
    margin-bottom:5px;
    width:240px;
    height:40px;
    font-size:20px;
    color:#74BA42;
}
.sub p{
    color:rgb(240, 240, 240);
    font-size:12px;
    line-height:36px;
    text-align:right;
    margin-bottom:10px;
}
</style>